<template>
  <div>
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :immediate-check='false'>

      <van-cell v-for='data in datalist'
                :key='data.filmId'
                @click='handleClick(data.filmId)'>
        <img :src="data.poster"
             alt="">
        <span class="title"> {{data.name}}</span>
        <div class="content">
          <div>观众评分:<span style="color:red;">{{data.grade}}</span></div>
          <div class="actors">主演:{{data.actors | actorsFiler}}</div>
          <div>{{data.nation}} | {{data.runtime }}分钟</div>
        </div>
      </van-cell>

    </van-list>
  </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import http from '@/util/http.js'

// 把详情页的主演给映射
Vue.filter('actorsFiler', ((data) => {
  if (data === undefined) {
    return '暂无主演'
  } //当没有主演的时候，后端连这个字段都没有，所有是underdefind
  return data.map(item => item.name).join(' ')
}))
export default {
  data () {
    return {
      datalist: [],
      loading: false,
      finished: false,
      current: 1,
      total: 0
    }
  },
  methods: {
    onLoad () {
      // 总长度匹配,数据真正到底就禁用懒加载
      console.log('到底了')
      console.log(this.datalist.length, this.total)
      if (this.datalist.length === this.total && this.total != 0) {
        console.log(1)
        this.finished = true
        return
      }

      this.current++

      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=3843052`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list',

        }
      }).then((res) => {
        this.datalist = this.datalist.concat(res.data.data.films)
        this.loading = false

      })


    },
    handleClick (id) {
      // location.href='#/detail'
      // 在vue可以用下面这个

      // 路径跳转
      // this.$router.push(`/detail/${id}`)
      // 命名跳转     命名路由不用传参的话，那就不用params了
      this.$router.push({
        name: 'detailName',
        params: {
          id: id
        }
      })
    }


  },
  mounted () {
    http({
      url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=3843052`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list',

      }
    }).then((res) => {

      console.log(res.data.data.films)
      this.datalist = res.data.data.films
      this.total = res.data.data.total
    })
  },
  destroyed () {
    window.scroll = null
  },
}
</script>
<style lang="scss" scoped>
.van-list {
  .van-cell {
    overflow: hidden;
    padding: 0.9375rem;
    img {
      float: left;
      width: 4.0625rem;
    }
    .title {
      font-size: 15px;
    }
    .content {
      font-size: 13px;
      color: gray;
      .actors {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; //超出字数省略号
        width: 200px;
      }
    }
  }
}
</style>